<!-- 自定义Alert组件 -->
<script setup>
import { ref } from 'vue'
	import { formatCls, isTrue } from './util.js'
const props = defineProps({
	type: String,effect: { type: [String], default: 'light' },
		// 标题
	title: String,
	// 描述信息
description: String,
	closable: Boolean,center: Boolean,
showIcon: Boolean,
		icon: String,closeText: String,closeIcon: { type: String, default: 've-icon-close' }
	})
const emit = defineEmits(['close'])
	const preClass = formatCls(props, 've__alert--', ['type', 'effect'])
const isClass = formatCls(props, 'is-', ['closable', 'center'])
	const visible = ref(true)
	const typeMap = {primary: 've-icon-notificationfill',success: 've-icon-check-circle',warning: 've-icon-minus-circle',danger: 've-icon-close-circle',info: 've-icon-exclamation-circle'
	}
const handleClose = (e) => {
	visible.value = false
		emit('close', e)
	}
</script>

<template>
	<transition name="fade">
	<div
		class="ve__alert"
		:class="[
				preClass,isClass,{'is-description': description || $slots.default}
			]"
		v-show="visible"
		>	
		<span v-if="showIcon" class="ve__alert-icon">
			<i v-if="icon" class="iconfont" :class="icon"></i>
	<i v-else class="iconfont" :class="typeMap[type || 'primary']"></i>
			</span>
		<div class="ve__alert-content">
	<div v-if="$slots.title || title" class="ve__alert-title">
				<slot name="title" />
	<template v-if="!$slots.title">{{title}}</template>
			</div>
	<div v-if="$slots.default || description" class="ve__alert-description">
				<slot />
	<template v-if="!$slots.default">{{description}}</template>
		</div>
			<span v-if="closable" class="ve__alert-closebtn" @click="handleClose">
	<i v-if="!closeText" class="iconfont" :class="closeIcon"></i>
			<template v-else>{{closeText}}</template>
	</span>
	</div>
</div>
	</transition>
</template>

<style lang="scss" scoped>
$color-primary: #409eff;
	$color-success: #31c48d;
	$color-warning: #e6a23c;
$color-danger: #f56c6c;
	$color-info: #909399;
	$color-white: #fff;
$color-black: #000;
	$primary-outline-color: #d9ecff;
$color-text-regular: #606266;
	$color-text-secondary: #909399;
$color-text-placeholder: #c0c4cc;
	$border-color-base: #dcdfe6;
$border-color-light: #e4e7ed;
	$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;
	$background-color-base: #f5f7fa;
	$border-width-base: 1px;
	$border-style-base: solid;
$border-color-hover: $color-text-placeholder;
	$border-base: $border-width-base $border-style-base $border-color-base;
	$border-radius-base: 4px;
$border-radius-small: 2px;
	$border-radius-circle: 100%;
	$border-radius-zero: 0;
$size-base: 14px;
	$font-size-extra-large: 18px;
	$font-size-large: 16px;
$font-size-base: 14px;
	$font-size-small: 12px;
	$font-weight-primary: 500;
$font-weight-secondary: 100;
	$font-line-height-primary: 24px;
$font-line-height-secondary: 16px;
$font-color-disabled-base: #bbb;
	$disabled-fill-base: $background-color-base;
$disabled-color-base: $color-text-placeholder;
	$disabled-border-base: $border-color-light;
$height-base: 32px;
	$large-height-base: 40px;
$small-height-base: 24px;
	$alert-title-font-size: $font-size-small;
$alert-description-font-size: $font-size-small;
	$alert-border-radius: $border-radius-base;
$alert-padding: 8px 15px;
	$alert-font-color: $color-primary;
	$alert-background-color: #ecf5ff;
$alert-border-color: #d9ecff;
$alert-success-font-color: $color-success;
	$alert-success-background-color: #f0f9eb;
$alert-success-border-color: #e1f3d8;
$alert-warning-font-color: $color-warning;
	$alert-warning-background-color: #fdf6ec;
$alert-warning-border-color: #faecd8;
$alert-danger-font-color: $color-danger;
	$alert-danger-background-color: #fef0f0;
$alert-danger-border-color: #fde2e2;
	$alert-info-font-color: $color-info;
$alert-info-background-color: #f4f4f5;
	$alert-info-border-color: #e9e9eb;
	.ve__alert {
	display: inline-flex;align-items: center;color: $alert-font-color;background-color: $alert-background-color;border-radius: 4px;
box-sizing: border-box;margin: 0;padding: 8px 15px;overflow: hidden;width: 100%;position: relative;
	}
.ve__alert.is-center {justify-content: center;}
	.ve__alert+.ve__alert {margin-top: 10px;}
	.ve__alert-icon {
display: inline-flex;align-items: center;font-size: 16px;margin-right: 8px;height: 16px;
	}
.ve__alert.is-description .ve__alert-icon {font-size: 28px; height: 28px;}
	.ve__alert-content {display: table-cell;}
.ve__alert-title {font-size: 13px; line-height: 18px;}
	.ve__alert.is-description .ve__alert-title {font-weight: bold;}
	.ve__alert-description {font-size: 12px; margin-top: 5px;}
.ve__alert-content .ve__alert-description:first-child {margin-top: 0;}
	.ve__alert-closebtn {
	display: flex;align-items: center;color: $color-text-placeholder;cursor: pointer;font-size: 12px;height: 12px;position: absolute;top: 12px;right: 15px;
	}
.ve__alert--dark .ve__alert-closebtn {color: #fff}
	.ve__alert--success {color: $alert-success-font-color; background-color: $alert-success-background-color;}
.ve__alert--warning {color: $alert-warning-font-color; background-color: $alert-warning-background-color;}
	.ve__alert--danger {color: $alert-danger-font-color; background-color: $alert-danger-background-color;}
.ve__alert--info {color: $alert-info-font-color; background-color: $alert-info-background-color;}
	.ve__alert--dark {color: #fff; background-color: $alert-font-color;}
.ve__alert--dark.ve__alert--success {background-color: $alert-success-font-color;}
	.ve__alert--dark.ve__alert--warning {background-color: $alert-warning-font-color;}
.ve__alert--dark.ve__alert--danger {background-color: $alert-danger-font-color;}
.ve__alert--dark.ve__alert--info {background-color: $alert-info-font-color;}
</style>
